<template>
	<view class="global-arrow" :style="{ 
      width: size + 'rpx', 
      height: size + 'rpx',
      color: color
    }" :class="['arrow-' + direction]">
		<!-- 箭头使用CSS绘制 -->
		<view class="arrow-shape"></view>
	</view>
</template>

<script>
	export default {
		name: 'GlobalArrow',
		props: {
			// 箭头方向：left/right/up/down
			direction: {
				type: String,
				default: 'left',
				validator: (value) => {
					return ['left', 'right', 'up', 'down'].includes(value);
				}
			},
			// 箭头大小（rpx）
			size: {
				type: Number,
				default: 24
			},
			// 箭头颜色
			color: {
				type: String,
				default: '#333333'
			}
		}
	};
</script>

<style scoped>
	.global-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		
	}

	.arrow-shape {
		width: 60%;
		height: 60%;
		border-width: 4rpx 4rpx 0 0;
		border-style: solid;
		border-color: currentColor;
		transform-origin: center;
	}

	/* 不同方向的箭头 */
	.arrow-left .arrow-shape {
		transform: rotate(-135deg);
	}

	.arrow-right .arrow-shape {
		transform: rotate(45deg);
	}

	.arrow-up .arrow-shape {
		transform: rotate(-45deg);
	}

	.arrow-down .arrow-shape {
		transform: rotate(135deg);
	}
</style>